require('./index.css');
require('page/common/header/index.js');
var Mock = require('mockjs');
var _mm=require('util/mm.js');
var choiceTemplateIndex = require('./ques_choice.string');
var titleTemplateIndex = require('./ques_title.string');
var echarts = require('echarts');
/*取出对象*/
var storage=window.localStorage;
var json=storage.getItem("ques_list");
var ques_list=JSON.parse(json);
/*页面逻辑*/
var page = {
	//初始化页面
	init : function(){
		this.renderPage();
        this.refresh_que_num();
        this.bindEvent();
	},
    /*返回按键*/
    bindEvent : function(){
        $('#button').click(function(){
            window.location.href=_mm.getUrlParam('redirect');
        });
    },
    /*刷新题目的序号*/
    refresh_que_num : function(){
        var span = document.getElementsByClassName('ques-title-number');
        console.log(span);
        for (var i = 0; i < span.length; i++) {
            span[i].innerHTML='Q'+(i+1)
        }
    },
	/*渲染页面*/
	renderPage : function(){
        var _this =this;
		/*获取点击页面传过来的参数，通过本页面地址*/
		var ID = _mm.getUrlParam('id');
        var cnt = 0;
		/*获取问题列表*/
		var quesList = ques_list.list[ID];
        var $ul = $('#box');
        var node = 0,
            item_bar = 0;
        /*更新问卷标题*/
	    $('.list-ques-title').html(quesList.title);
		/*便利该列表下的问题，并判断问题是什么类型的*/
		for(var i=0;i<quesList.question.length;i++)
			{
                    /*判断问题是不是文本*/
                    if(quesList.question[i].ques_type == 'text')
                        {
                            var $li = $('<li></li>');
                            $li.attr('id',i);
                            var singleHtml = '';
                            singleHtml = _mm.renderHtml(titleTemplateIndex,quesList.question[i]);
                            $ul.append($li);
                            console.log(singleHtml);
                            $('#'+i).html(singleHtml);
                            node = i;
                            item_bar= quesList.question[i].ques_choice.length;
                        _this.echartsData('text',node,item_bar);

                        }             
				/*判断问题是不是单选题*/
					if(quesList.question[i].ques_type == 'single')
						{
                            var $li = $('<li></li>');
                            $li.attr('id',i);
							var singleHtml = '';
							singleHtml = _mm.renderHtml(titleTemplateIndex,quesList.question[i]);
							$ul.append($li);
							console.log(singleHtml);
                            $('#'+i).html(singleHtml);
                            node = i;
                            item_bar= quesList.question[i].ques_choice.length;
                            /*遍历单选题下面的选项*/
                            for(var j=0;j<quesList.question[i].ques_choice.length;j++)
                                {
                                    var $div = $('<div></div>');
                                    var singleHtml_item = '';
                                    singleHtml_item = _mm.renderHtml(choiceTemplateIndex);
                                    $div.html(singleHtml_item);
                                    $('#'+i).find('.ques-box').append($div);
                                    $($('#'+i).find('.ques-choice-cont')[j]).html(quesList.question[i].ques_choice[j]);
                                    $($('#'+i).find('.ques-choice-number')[j]).html("选项"+(j+1));                                   
                                }
                        _this.echartsData('single',node,item_bar);

						}                
                /*判断是不是多选题目*/
                    if(quesList.question[i].ques_type == "multiple")
                        {
                            var $li = $('<li></li>');
                            $li.attr('id',i);
                            var singleHtml = '';
                            singleHtml = _mm.renderHtml(titleTemplateIndex,quesList.question[i]);
                            $ul.append($li);
                            console.log(singleHtml);
                            $('#'+i).html(singleHtml);
                            node = i;
                            item_bar= quesList.question[i].ques_choice.length;
                            /*遍历单选题下面的选项*/
                            for(var j=0;j<quesList.question[i].ques_choice.length;j++)
                                {
                                    var $div = $('<div></div>');
                                    var singleHtml_item = '';
                                    singleHtml_item = _mm.renderHtml(choiceTemplateIndex);
                                    $div.html(singleHtml_item);
                                    $('#'+i).find('.ques-box').append($div);
                                    $($('#'+i).find('.ques-choice-cont')[j]).html(quesList.question[i].ques_choice[j]);
                                    $($('#'+i).find('.ques-choice-number')[j]).html("选项"+(j+1));                                   
                                }
                        _this.echartsData('multiple',node,item_bar);

                        }              
			}
	},
    /*判断选项mock数据*/
    echartsData : function(echarts_type,node,item_bar){
        var _this=this;
        if(echarts_type == 'text')
            {
                var data_y      = ['有效回填'];
                var data_series = [];
                var height='120px';            
                var number = Mock.mock({
                'number1|1-10000': 0,
                        });
                data_series.push(number.number1);
                /*渲染html*/
                _this.echartsHtml_sin(node,data_y,data_series,height,'text');
            }
        if(echarts_type == 'single')
            {
                var data_y      = [];
                var data_series = [];
                for(var i=0;i<item_bar;i++)
                    {
                        var choice = "选项"+(i+1);
                        var number = Mock.mock({
                            'number1|1-10000': 0,
                        })
                        data_y.unshift(choice);
                        data_series.push(number.number1);
                    }
                /*渲染html*/
                _this.echartsHtml_sin(node,data_y,data_series);
            }
          if(echarts_type == 'multiple')
            {
                var data_y      = [];
                var data_series = [];
                for(var i=0;i<item_bar;i++)
                    {
                        var choice = "选项"+(i+1);
                        var number = Mock.mock({
                            'number1|1-10000': 0,
                        })
                        data_y.push(choice);
                        data_series.push(number.number1);
                    }
                /*渲染html*/
                _this.echartsHtml_mul(node,data_y,data_series);
            }
    },
    echartsHtml_mul  : function(node,data_y,data_series)
        {

             $('#'+node).find('.span').css('height',$('#'+node).find('.ques-box').height());
             var myChart = echarts.init(($('#'+node).find('.span').get(0)));
             console.log($('#'+node).height(),'height');
             var len = data_y.length;
             var option = {
                    title : {
                        x:'center'
                    },
                    tooltip : {
                        trigger: 'item',
                        formatter: "{a} <br/>{b} : {c} ({d}%)"
                    },
                    legend: {
                        orient: 'vertical',
                        left: 'left',
                    },
                    series : [
                        {
                            name: '访问来源',
                            type: 'pie',
                            radius : '55%',
                            center: ['50%', '60%'],
                            data:[
                                
                            ],
                            itemStyle: {
                                emphasis: {
                                    shadowBlur: 10,
                                    shadowOffsetX: 0,
                                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                                }
                            }
                        }
                    ]
                };
                for(var i =0;i<len;i++)
                    {
                        option.series[0].data.push( {value:335, name:'直接访问'});
                        option.series[0].data[i].value=data_series[i];
                        option.series[0].data[i].name=data_y[i];
                    }
                 myChart.setOption(option);
        },
    echartsHtml_sin  : function(node,data_y,data_series,height,echarts_type){
         $('#'+node).find('.span').css('height',$('#'+node).height());
           if(echarts_type == 'text')
                {
                    $('#'+node).find('.span').css('height',height);
                    $('#'+node).find('.span').css('top','50%');
                    $('#'+node).find('.span').css('margin-top',-90)
                } 
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(($('#'+node).find('.span').get(0)));
        var data1 =[];
        var data2 =[];
        data1 = data_y;
        data2 = data_series;
        console.log(data1,data2);
        var option={
            color: ['#f7911e'],
            title: {
                 textStyle:{
                    fontSize: 25,
                       fontWeight: 'bolder',
                color: '#333'
                }        
            },
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'shadow'
                }
            },
            grid: {
                left: '%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            xAxis: {
                type: 'value',
                boundaryGap: [0, 0.01]
               
            },
            yAxis: {
                type: 'category',
                data: data1
            },
            series: [
                {
                    name: '2012年',
                    type: 'bar',
                    data: data2
                }
            ]
        };
        console.log(option.series[0].data,5555555)
        // 绘制图表
        myChart.setOption(option);
    }

}
$(document).ready(function(){
	page.init();
})
// 基于准备好的dom，初始化echarts实例
/*var myChart = echarts.init($('.span').get(0));
/*var number = Mock.mock({
    'number1|1-100': 0,
    'number2|1-100': 0,
    'number3|1-100': 0,
    'number4|1-100': 0
})
$('.cont').html(7777);
var number1 = Number(JSON.stringify(number.number1)),
	number2 = Number(JSON.stringify(number.number2)),
	number3 = Number(JSON.stringify(number.number3)),
	number4 = Number(JSON.stringify(number.number4));
var all =number1+number2+number3+number4;*/
